<template>
    <div class="login_container">
        <div class="login_box">
            <el-form class="login_form" :model="formLogin" :rules="loginFormRules" ref="loginFormRef">
                <div class="login_title">
                    <p>SailEncoding管理平台</p>
                </div>
                <el-form-item prop="username">
                    <el-input prefix-icon="icon-geren iconfont" v-model="formLogin.username" placeholder="请输入账号"
                        autofocus maxlenght="18"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input id="pwd" prefix-icon="icon-jiesuo1 iconfont" type="password" placeholder="请输入密码"
                        v-if="formLogin.password == '' ? false:true" v-model="formLogin.password" maxlenght="18">
                        <i class='eye' slot="suffix"
                            :class="this.isShow?'icon-yulan-dakai iconfont':'icon-yincangmima iconfont'"
                            @click="eyeClick"></i>
                    </el-input>
                    <el-input prefix-icon="icon-jiesuo1 iconfont" type="password" v-else v-model="formLogin.password"
                        placeholder="请输入密码" maxlenght="18"></el-input>
                </el-form-item>
                <el-form-item prop="code" ref="code">
                    <el-row>
                        <el-col :span="16">
                            <el-input placeholder="验证码" v-model="formLogin.code" maxlength="2"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <img :src="captchaImage" class="captcha" alt="" height="40" style="margin-left: 4px;"
                                @click="getCaptchaImage" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item class="but_box">
                    <el-button type="primary" round class="login_button" size="medium" @click="loginSubmit">登录
                    </el-button>
                </el-form-item>
                <div class="login_function">
                    <a href="#">注册账号</a>
                    <a href="#">忘记密码</a>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>

//引入校验规则
import { accountValidate, passwordValidate } from '@/utils/validate'
//引入登录API
import { login } from '@/api/login';
//引入验证码API
import { captchaImage } from '@/api/captcha';
//引入加密工具类
import {Encrypt} from '@/utils/cryptoUtils'


export default {
    //name = Vue组件名称
    name: 'Login',
    //Vue组件定义的数据对象
    data() {
        //账号自定义规则
        var checkAccount = (rolu, value, callback) => {
            if (!accountValidate(value)) return callback(new Error("账号只能是英文字母加数字组成"));
            return callback();
        };

        //密码自定义规则
        var checkPassword = (rule, value, callback) => {
            if (!passwordValidate(value))
                return callback(
                    new Error("密码必须是6位以上,并包含字符、数字、特殊符号")
                );
            return callback();
        };
        return {
            //眼睛是否展示
            isShow: true,
            //登录表单
            formLogin: {
                username: '',
                password: '',
                uuid: '',
                code: ''
            },
            //表单验证规则
            loginFormRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 5, max: 18, message: '用户名位数不正确', trigger: 'blur' },
                    { validator: checkAccount, trigger: "blur" }
                ],
                password: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '密码长度不正确', trigger: 'blur' },
                    { validator: checkPassword, trigger: "blur" }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ]
            },
            //验证码图片
            captchaImage: '',
        }
    },
    methods: {
        //密码眼睛
        eyeClick() {
            this.isShow = !this.isShow;
            let pwd = document.querySelector("#pwd");
            pwd.type = this.isShow ? 'password' : 'text';
        },
        //登录
        loginSubmit() {
            this.$refs['loginFormRef'].validate(valid => {
                //校验登录
                if (!valid) {
                    return false;
                } else {
                    const loding = this.$loading({
                        lock: true,
                        text: '登录中...',
                        Spinner: 'el-icon-loading',
                        background:'rgba(0,0,0,0.7)'
                    });

                    login(this.formLogin.username,Encrypt(this.formLogin.password), this.formLogin.uuid, this.formLogin.code).then(data => {
                        console.log(data)
                        //登录成功关闭加载框
                        loding.close();
                        //登录成功修改Token
                        this.$store.commit('user/setToken',data.msg)
                        //提示登录信息
                        this.$message({
                            message: "登录成功",
                            type: "success"
                        });
                        //登录成功清除表单
                        this.$refs['loginFormRef'].resetFields();
                        //跳转登录页面
                        this.$router.push('/home');
                    }).catch(err => {
                        // console.log(err);
                        //登录失败关闭加载框
                        loding.close();
                        //登录失败重新刷新验证码
                        this.getCaptchaImage();
                        //提示失败信息
                        this.$message({
                            message: err.message,
                            type: "error"
                        });
                        //表单验证码单项清空
                        this.$refs['code'].resetField();
                    })
                }
            });
        },
        //获取验证码
        getCaptchaImage() {
            captchaImage().then(data => {
                this.formLogin.uuid = data.data.uuid;
                this.captchaImage = "data:image/gif;base64," + data.data.img;
            }).catch(err => {
                this.$message({
                    message:err.message,
                    type:"error"
                })
            })
        }
    },
    created() {
        this.getCaptchaImage();
    }
}
</script>

<!--
    lang=less  支持less语法  
    scoped     只在当前实例文件生效
-->
<style lang="less" scoped >
//登录背景
.login_container {
    background-image: url("@/assets/imgs/login_bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    widows: 100%;
}

//登录盒子
.login_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 400px;
    border-radius: 5px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

//标题
.login_title {
    text-align: center;
    color: gray;
    text-shadow: gray 1px 1px 3px;
    font-size: 14px;
    margin-bottom: 30px;
    .text(30px);
}

//登录表单
.login_form {
    position: absolute;
    bottom: 5%;
    width: 100%;
    padding: 0px 30px;
    box-sizing: border-box;
}

//按钮容器
.login_button {
    width: 100%;
}

//登录页面功能
.login_function {
    display: flex;
    justify-content: flex-end;

    a {
        display: inline-block;
        padding: 0px 10px;

        &:link {
            text-decoration: none;
            color: blue;
        }

        &:visited {
            text-decoration: none;
            color: blue;
        }
    }
}

//眼睛
.eye,
.captcha {
    &:hover {
        cursor: pointer;
        color: black;
    }

    &:active {
        color: bisque;
    }
}
</style>
